﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="order-list">
      <div
        v-for="(items,index) in dataList"
        :key="index"
        class="order-items"
        :class="currentDate === items?'active':''"
        @click="stateChange(items)"
      > {{ cutDate(items) }} 预定</div>
    </div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input
              v-model="listQuery.supplier_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('supplier.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="listQuery.goods_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('meal.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <div
            class="search-button"
            @click="handleFilter"
          >
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div
            class="search-button"
            @click="handleRefresh"
          >
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
        </el-form>
        <div class="filter-right">
          <div
            class="stock-button"
            :class="checkedRow.length > 0 ? '' : 'disable'"
          >
            <button @click="handlePurchase">生成采购单</button>
          </div>
        </div>
      </div>
      <div class="chart-list">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255,255,255,0.2)"
          border
          fit
          highlight-current-row
          style="width: 100%min-height:1000px"
          @row-click="clickRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :selectable="isDisabled"
            disabled="true"
            align="center"
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            fixed="left"
            align="center"
            :label="$t('table.id')"
            width="65"
          >
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('terminal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.equipment_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('terminal.alias')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.alias }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.location')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('supplier.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.supplier_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('meal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.bookNumber')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogVisible"
    >
      <div class="popup-form">
        <div class="header-form">
          <div class="from-item">
            <el-table
              :data="temp"
              :header-cell-style="{background:'#F0F2F5',color:'#8B94BE'}"
            >
              <el-table-column
                align="center"
                show-overflow-tooltip
                :label="$t('terminal.alias')"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.alias }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                :label="$t('terminal.name')"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.equipment_name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                :label="$t('order.no')"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.order_no }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                :label="$t('order.time')"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.create_time }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                :label="$t('order.payTime_2')"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.pay_time }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">{{
              $t("table.cancel")
            }}</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >{{ $t("table.confirm") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth";
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      currentDate: undefined,
      dataList: [],
      orderOptions: [
        {
          value: 1,
          label: "预订"
        },
        {
          value: 2,
          label: "现场"
        }
      ],
      statusOptions: [
        {
          value: 1,
          label: "待取"
        },
        {
          value: 2,
          label: "已取"
        },
        {
          value: 3,
          label: "已过期"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        supplier_name: "",
        goods_name: ""
      },
      dialogVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      temp: [],
      circleOptions: undefined,
      circleCount: undefined,
      maintainOptions: [],
      maintainCount: undefined,
      pageSize: 20,
      optionProps: {
        value: "id",
        label: "name"
      },
      checkedRow: []
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    this.currentDate = this.timestampToTime(new Date().getTime(), '{y}-{m}-{d}');
    const dataList = [];
    for (let i = 0; i < 7; i++) {
      dataList.push(this.timestampToTime(new Date().getTime() + i * (24 * 60 * 60 * 1000), '{y}-{m}-{d}'))
    }
    this.dataList = dataList;
    this.getList();
  },
  methods: {
    stateChange(date) {
      this.currentDate = date;
      this.getList();
    },
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        equipment_name: "",
        goods_name: "",
        type: 1,
        is_sumbit: undefined
      };
      this.getList();
    },
    // 获取预定列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        date: this.currentDate ? this.currentDate : "",
        supplier_name: this.listQuery.supplier_name ? this.listQuery.supplier_name : "",
        goods_name: this.listQuery.goods_name ? this.listQuery.goods_name : ""
      };
      const path = {
        app: "subscribe",
        api: "api_subscribe_index_getList",
        version: "1.0",
        type: 2,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    isDisabled(row, index) {
      if (this.currentDate === this.timestampToTime(new Date().getTime(), '{y}-{m}-{d}') && row.is_sumbit !== 1) {
        return 1;
      } else {
        return 0;
      }
    },
    handleSelectionChange(data) {
      const checkedRow = [];
      if (data.length > 0) {
        data.forEach(element => {
          checkedRow.push(element.equipment_id);
        });
      }
      this.checkedRow = checkedRow;
    },
    handlePurchase() {
      if (this.checkedRow.length > 0) {
        this.$router.push({
          path: "/orders/order-form",
          query: {
            ids: this.checkedRow.join(",")
          }
        });
      } else {
        return false;
      }
    },
    clickRow(row) {
      const path = {
        app: "subscribe",
        api: "api_subscribe_index_getListDetails",
        version: "1.0",
        type: 2,
        data: {
          equipment_id: row.equipment_id,
          date: this.currentDate ? this.currentDate : ""
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            });
          } else if (resj.api === "api_subscribe_index_getList") {
            if (resj.data.length > 0) {
              this.total = resj.count;
              this.list = resj.data;
            }
            this.listLoading = false;
          } else if (resj.api === "api_subscribe_index_getListDetails") {
            this.dialogStatus = "read";
            this.temp = resj.data
            this.dialogVisible = true;
          }
        }
      }
    }
  }
};
</script>
